/*绝对布局*/
.ls-abs-outer {
  position: relative;
}

.ls-abs-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*flex布局*/
/*-4种布局框架-*/
.ls-flex {
  display: flex;
}

.ls-flexV {
  display: flex;
  flex-direction: column;
}

.ls-flex-wap {
  display: flex;
  flex-wrap: wrap;
}

.ls-flexV-wap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

/*-对齐方式-*/
.ls-flex-center {
  justify-content: center;
}

.ls-flex-centerV {
  align-items: center;
}

.ls-flex-end {
  justify-content: flex-end;
}

.ls-flex-endV {
  align-items: flex-end;
}

.ls-flex-between {
  justify-content: space-between;
}

.ls-flex-around {
  justify-content: space-around;
}

/*flex子项属性*/
.ls-flex-unShrink > div {
  flex-shrink: 0;
}

.ls-flex-unShrink > .ls-flexItem-grow {
  flex-grow: 1;
  width: 0;
}

.ls-flex-unShrink > .ls-flexItem-growV {
  flex-grow: 1;
  height: 0;
}

/*容器高度*/
.height100 {
  height: 100%;
}

.width100 {
  width: 100%;
}

/*文本超出长度后显示省略号*/
.ls-text-unWarp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*文本居中显示*/
.ls-text-center {
  text-align: center;
}

/*间隔一行文本*/
.ls-text-line {
  margin: 1em 0;
}

/*间隔半行文本*/
.ls-text-halfLine {
  margin: 0.5em 0;
}

/*可交互文字样式*/
.ls-text-hover {
  cursor: pointer;
}

.ls-text-hover:hover {
  color: var(--el-color-primary);
}

/*面板样式*/
.ls-panel {
  background-color: var(--el-color-white);
  border: var(--el-border-base);
  box-shadow: var(--el-box-shadow-base);
  border-radius: var(--el-border-radius-base);
}